<template>
  <div class="map-airplan-box">
    <div :id="id" class="map-airplan"></div>
  </div>
</template>

<script>
import {cityMap} from '@/utils/json/cityData/china-main-city-map.js'

export default {
  components: {
  },
  props: {
    chinaMapIn: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapDetail: {
      type: Object,
      default: () => {
        return {}
      }
    },
    city: {
      type: [Object,Array,String],
      default: () => {
        return ''
      }
    },
    province: {
      type: [Object,Array,String],
      default: () => {
        return {}
      }
    },
  },
  watch: {
    // chinaMapIn: {
    //   handler() {
    //     this.initEcharts()
    //   },
    //   immediate: true,
    //   deep: true
    // },
    // mapDetail: {
    //   handler() {
    //     this.initEcharts()
    //   },
    //   immediate: true,
    //   deep: true
    // },
    // provinceName: {
    //   handler() {
    //     this.initEcharts()
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  data() {
    return {
      id: 'map-city',
      chart: null,
      detail: '',
      mapSelParam: null, 
      echart: {
        title: '中华人民共和国',   //选中的省份
        zoom: 0.4
      },
      sign: require("@/assets/screen/sign.png"),
      
    }
  },
  mounted() {
    this.initEcharts()
    window.addEventListener('resize', this.chartsResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.chartsResize)
    this.chart?.dispose()
  },
  methods: {
    adFilter(value) {
      const l = cityMap[value]
      return l
    },
    initEcharts() {
      const city = this.city
      const cityId = cityMap[city];
     let cityJSON = require('@/utils/json/cityData/' + cityId + '.json')
        this.$echarts.registerMap(this.city, cityJSON)
        this.chart = this.$echarts.init(document.getElementById(this.id))
        this.chart.clear()
        this.setOption()
        //点击各省份事件处理
      let _this = this;
      // this.chart.on('click', this.clickchart)
      this.chart.getZr().on('click', this.clickChartTyep)
    },
    setOption() {
      // const xdata = this.chinaMapIn.map((item) => ({
      //   ...item,
      //   // name: item.provenceName,
      //   // value: [
      //   //   this.adFilter(item.areaCode)?.lon,
      //   //   this.adFilter(item.areaCode)?.lat
      //   // ]
      // }))
      this.chart.setOption({
        title: {
          text: this.city,
          top: '8%',
          left: '8%',
          textStyle: {
            fontSize: 14,
            fontWeight: 300,
            color: '#fff'
          }
        },
        tooltip: {
          extraCssText:
          `background: linear-gradient(121deg, rgba(9,12,18,0.7), rgba(17,29,60,0.49));
border: 1px solid;
border-image: linear-gradient(0deg, rgba(86,103,139,0.81), rgba(54,178,255,0.42)) 1 1;
border-radius: 2px;z-index:9999`,
          trigger: 'item',
          formatter: function(value) {
            let arr = ''
            arr = `<div style="padding:10px;color: #CCDCFF;">
            <div>
            
            <span style="padding-left:10px;font-size: 16px;">${
              value.name
            }项目任务数统计</span></div>
            <div style="padding-top:10px;line-height:2">
            <div style="float: left;">${value.name }</div>
            <div style="float: right;">${value.name || 0}</div>
            </div> 
            </div>`
            return arr
          }
        },
        geo: {
          map: this.city,
          roam: false, // 不开启缩放和平移
          zoom: 0.6, // 视角缩放比例
          // roam: true,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#F6FFD9​'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
                // fontSize:14
              }
            }
          },
          scaleLimit: {
            // 所属组件的z分层，z值小的图形会被z值大的图形覆盖
            min: 0.7, // 最小的缩放值
            max: 10 // 最大的缩放值
          },
          top: '0',
          itemStyle: {
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            emphasis: {
              areaColor: {
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(185,231,50,0.20)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#B9E732' // 100% 处的颜色
                  }
                ]
              },
              borderWidth: 2,
              borderColor: '#E3F5AD'
            },
            lable: {
              emphasis: {
                show: true,
                color: '#D4EEFF' // 字体颜色
              }
            },
            shadowColor: '#29F4EC',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 5,
            borderColor: '#29F4EC',
            borderWidth: 1
          }
        },
        series: [
          {
            name: '城市数据',
            type: 'map',
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            coordinateSystem: 'geo',
            symbolSize: 8,
            symbol: `image://${this.sign}`, // 标记的图形
            zoom: 1.2,
            zlevel: 4,
            itemStyle: {
              normal: {
                color: '#D1FF47',
                borderColor: '#E3F5AD',
                shadowColor: '#E3F5AD',
                shadowBlur: 8
              },
              emphasis: {
                areaColor: '#36B2FF',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            },
            data: [],
          },
        ]
      })
    },
    chartsResize() {
      this.chart.resize()
    },
    setChina(val) {
        this.$emit("setChina", val)
    },
    clickChartTyep(params){
      if(params.target) {
        this.clickchart(params)
      } else {
        this.setChina({...this.province,chinaType:'province' })
      }
    },
    clickchart(param){
        //获取到的省份名
        let temp = JSON.stringify(this.mapSelParam);
        if(this.mapSelParam){
          //取消选中前一次选中的省份
          this.chart.dispatchAction({
            type: 'geoUnSelect',
            seriesIndex: this.mapSelParam.seriesIndex,
            seriesName: this.mapSelParam.seriesName,
            dataIndex: this.mapSelParam.dataIndex,
            name: this.mapSelParam.name
          })
        }
        this.mapSelParam = {
          seriesIndex: param.seriesIndex,
          seriesName: param.seriesName,
          dataIndex: param.dataIndex,
          name: param.name
        }
        
        //*********************************
        //***为选中的省份的参数赋值**********
        //*********************************
        this.$set(this.echart, 'title', param.name);

        this.setOption();
        //如果前一次选中与当前选中相同，则return，取消选中
        if(temp === JSON.stringify(this.mapSelParam)){
          this.$set(this.echart, 'title', '中华人民共和国');
          this.setOption();
          this.mapSelParam = {};
          return;
        }

        //选中当前点击的省份
        this.chart.dispatchAction({
            type: 'geoSelect',
            seriesIndex: this.mapSelParam.seriesIndex,
            seriesName: this.mapSelParam.seriesName,
            dataIndex: this.mapSelParam.dataIndex,
            name: this.mapSelParam.name
          })
        this.$nextTick(() => {
          this.echart.zoom = 1.1;
          this.setOption();
        })
      }
  }
}
</script>

<style lang="scss" scoped>
.map-airplan-box {
  position: relative;
  height: 100%;
  // top: -46px;
  .map-airplan {
    height: 100%;
  }
  .map-airplan-bg {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    // background-image: url("../../assets/images/map/rotate-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: rotate 30s linear 0s infinite;
  }
  @keyframes rotate {
    0% {
      transform: rotateZ(0);
    }
    50% {
      transform: rotateZ(-180deg);
    }
    100% {
      transform: rotateZ(-360deg);
    }
  }
  .map-airplan-select {
    position: absolute;
    top: 1vh;
    left: 20px;
  }
  .map-airplan-buttons {
    position: absolute;
    bottom: 5vh;
    left: 0;
    margin-left: 20px;
    z-index: 2;
    color: white;
    border: 1px solid #57a5b4;
    padding: 0 10px 5px 10px;
    .map-airplan-row {
      padding-top: 0.5vh;
      display: flex;
    }
    .map-airplan-button {
      cursor: pointer;
      font-size: 12px;
      margin: 0.2vh 10px;
      & > .map-airplan-line {
        display: inline-block;
        width: 30px;
        margin-right: 2px;
        position: relative;
        top: -0.3vh;
      }
      .unfinished {
        border-bottom: 5px solid rgba(248, 10, 117, 1);
      }
      .finished {
        border-bottom: 5px solid rgba(161, 242, 52, 1);
      }
      & > .map-airplan-img {
        width: 22px;
        vertical-align: middle;
        margin-right: 2px;
      }
    }
  }
}
</style>
